<template>
	<div id="app">
		<transition name="page-switch">
			<router-view/>
		</transition>
	</div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
	name: 'App',
	data(){
		return{

		}
	},
	computed :mapGetters(['getMaskAct']),
	watch:{
		getMaskAct(){
			var that = this
			var scrolldiv = document.querySelector('.isScroll')
			var app =  document.getElementById("app")
			document.body.addEventListener('touchmove', (event) => {
				if(this.$store.getters.getMaskAct){
					event.preventDefault();		
				}
			},{ passive: false })
			if(this.$store.getters.getMaskAct){				
				if(scrolldiv){
					var startY;
					scrolldiv.addEventListener('touchstart', function(evt) {
						startY = evt.touches[0].pageY
					})
					scrolldiv.addEventListener('touchmove', function(evt) {
						var scrollY = evt.touches[0].pageY
						if(startY<=scrollY && scrolldiv.scrollTop == 0){
							return false
						}else if(startY>scrollY && scrolldiv.scrollTop + scrolldiv.offsetHeight == scrolldiv.scrollHeight){
							return false
						}

						if(scrolldiv.offsetHeight < scrolldiv.scrollHeight){
							evt.stopPropagation();	
						}
					},{ passive: false })
				}
			}
		},
	},
	created:function() { 
		window.bodyScroll = this.bodyScroll = function (event){
			event.preventDefault();				
		}
	},
}
</script>

